<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/static/backstage/css/layui.css}" rel="stylesheet">
    <script th:src="@{/static/backstage/js/jquery-2.1.1.js}"></script>
    <script th:src="@{/static/backstage/js/layui.js}"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        table th, td {
            font-size: 14px;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            min-height: 20px;
            text-align: center;
        }

        table th {
            padding: 9px 15px;
        }

        table td {
            padding: 9px 15px;
            width: 60px;

        }
    </style>
</head>
<body>
<!--设置滚动条-->
<style>
    body::-webkit-scrollbar {
        width: 10px;
    }

    body::-webkit-scrollbar-track {
        /*background: #999;*/
        background: #fff;
        border-radius: 2px;
    }

    body::-webkit-scrollbar-thumb {
        /*background: red;*/
        background: #fff;
        border-radius: 10px;
    }

    body::-webkit-scrollbar-thumb:hover {
        /*background: #333;*/
        background: #fff;
    }

    body::-webkit-scrollbar-corner {
        /*background: #179a16;*/
        background: #fff;
    }
</style>

<div class="table_content" id="table_content" style="width: 100%;background-color: #fff;margin: 0 auto;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>[[${articleTitle}]]</legend>
    </fieldset>
    <table>
        <tr style="background-color: #f2f2f2;font-weight: bold;">
            <td style="width: 700px;">留言内容</td>
            <td style="width: 135px;">留言时间</td>
            <td style="width: 190px;">操作</td>
        </tr>
        <!--循环开始-->
        <tr th:each="commentList:${commentListById.pageList}">
            <td style="padding: 10px 15px;">
                <p style="overflow:hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"
                   th:text="${commentList.commentContent}"
                   th:title="${commentList.commentContent}">
                </p>
            </td>
            <td style="padding: 10px 15px;" th:text="${commentList.commentDate}"></td>
            <td style="padding: 10px 15px;">
                <div style="float: left;padding: 10px 15px;">
                    <a href="javascript:void(0);" onclick="replyComment(this)"
                       style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;"
                       th:type="${commentList.commentId}">回复</a>
                </div>
                <div style="float: left;padding: 10px 15px;">
                    <a href="javascript:void(0);" onclick="deleteOneCommentById(this)"
                       style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;"
                       th:type="${commentList.commentId}">删除留言</a>
                </div>
            </td>
        </tr>
    </table>
    <!--分页导航-->
    <div style="width: 44%;height: 60px;margin: auto;font-size: 15px">
        <a href="javascript:void(0);" id="preBtn" name="pre"
           style="background-color: #009688;padding: 5px 5px 5px 6px;color: #fff;border-radius: 2px;margin: 0px 10px 0px 10px;line-height: 60px;font-size: 14px;"
           title="上一页" type=""> 上一页 </a>
        <a href="javascript:void(0);" id="nextBtn" name="next"
           style="background-color: #009688;padding: 5px 5px 5px 6px;color: #fff;border-radius: 2px;margin: 0px 10px 0px 10px;line-height: 60px;font-size: 14px;"
           title="下一页"> 下一页 </a>
        &nbsp;跳转至 &nbsp;<input autocomplete="off" id="pageJumpInput" maxlength="3"
                               oninput="value=value.replace(/[^\d]/g,'')"
                               style="width: 25px;border: 1px solid #e6e6e6;border-radius: 2px;padding: 5px 5px;"
                               type="text">&nbsp; 页 &nbsp;<input id="pageJumpBtn"
                                                                 style="font-size: 14px;padding: 4px 5px 4px 6px;border-radius: 2px;background-color: #009688;color: #fff;border: none;"
                                                                 type="button" value="确 认">
        &emsp;当前第 [[${commentListById.current}]] 页，共 [[${commentListById.total}]] 页
    </div>
</div>


<div id="comment_Reply"
     style="z-index: 999;display: none;width: 95%;left: 2.5%;min-height: 320px;height: auto;position: absolute;top: 15%;border: 1px solid #e6e6e6;background-color: #fff">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>留言详情</legend>
    </fieldset>
    <div class="layui-panel" style="width: 85%;margin: auto;">
        <div style="padding: 25px 20px;" id="comment_content"></div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend id="reply_legend"></legend>
    </fieldset>

    <div id="showReply" style="display: none;">
        <div class="layui-panel" style="width: 85%;margin: auto;">
            <!--回复信息展示区域-->
            <div style="padding: 25px 20px;" id="showContent_div"></div>
        </div>
        <a id="editOneReplyBtn" class="layui-btn" style="margin-top: 15px;margin-left: 77px;margin-bottom: 20px;" onclick="editOneReply()">修改回复</a>
        <a class="layui-btn layui-btn-primary" id="deleteReplyBtn" style="margin-top: 15px;margin-bottom: 20px;" onclick="deleteOneReply(this)">删除回复</a>
        <button class="layui-btn layui-btn-primary" id="showCancel" style="margin-top: 15px;margin-bottom: 20px;">取消</button>
    </div>
    <!--提交回复的表单-->
    <form class="layui-form layui-form-pane" id="replyForm" onsubmit="return false">
        <input name="commentId" type="hidden" id="comment_id">
        <div class="layui-form-item layui-form-text" style="width: 85%;margin: auto">
            <label class="layui-form-label">回复留言</label>
            <div class="layui-input-block">
                <textarea name="replyContent" class="layui-textarea" id="replyContentArea" placeholder="请输入内容"></textarea>
            </div>
        </div>
        <div style="width: 20%;margin-left: 77px;margin-top: 15px;margin-bottom: 15px;">
            <button class="layui-btn" id="submitBtn">提交</button>
            <button class="layui-btn layui-btn-primary" id="replyFormCancel" type="reset">取消</button>
        </div>
    </form>
    <!--修改留言-->
    <form class="layui-form layui-form-pane" id="editReplyForm" onsubmit="return false" style="display: none">
        <input name="commentId" type="hidden" id="edit_comment_id">
        <div class="layui-form-item layui-form-text" style="width: 85%;margin: auto">
            <label class="layui-form-label">修改回复</label>
            <div class="layui-input-block">
                <textarea name="replyContent" class="layui-textarea" id="editReplyContentArea" placeholder="请输入内容"></textarea>
            </div>
        </div>
        <div style="width: 20%;margin-left: 77px;margin-top: 15px;margin-bottom: 15px;">
            <a class="layui-btn" id="editSubmitBtn" onclick="submitReplyChanges(this)">提交修改</a>
            <a class="layui-btn layui-btn-primary" id="editReplyFormCancel">取消</a>
        </div>
    </form>

</div>
<!--遮罩-->
<div id="zhezhao"
     style="width: 100%;height: 100%;background-color:#000;opacity:0.3;display:none;z-index:500;position: absolute;left: 0;top: 0;"></div>
</body>

<script th:inline="javascript">
    //上一页按钮
    $("#preBtn").click(function () {
        var current = [[${commentListById.current}]];
        var total = [[${commentListById.total}]];
        var articleId = [[${commentListById.pageList.get(0).articleId}]];
        if (current == 1) {
            layer.msg('没有上一页了！');
        } else if (current > 1) {
            layer.load(1, {time: 0.3 * 1000});
            $.ajax({
                url: "/backstage/commentList/" + (Number(current) - Number(1)) + "/" + articleId,
                success: function (html) {
                    setTimeout(function () {
                        $("#table_content").html(html);
                    }, 100)
                }
            });
        } else if (current > total) {
            layer.msg('页码错误！', {icon: 2});
        }
    });
    //下一页按钮
    $("#nextBtn").click(function () {
        var current = [[${commentListById.current}]];
        var total = [[${commentListById.total}]];
        var articleId = [[${commentListById.pageList.get(0).articleId}]];
        if (current < total && current > 0) {
            layer.load(1, {time: 0.3 * 1000});
            $.ajax({
                url: "/backstage/commentList/" + (Number(current) + Number(1)) + "/" + articleId,
                success: function (html) {
                    setTimeout(function () {
                        $("#table_content").html(html);
                    }, 100)
                }
            });
        } else if (current == total) {
            layer.msg('没有下一页了！');
        } else {
            layer.msg('没有下一页了！');
        }
    });
    //跳转按钮
    $("#pageJumpBtn").click(function () {
        //获取当前页码
        var current = [[${commentListById.current}]];
        //获取总页码
        var total = [[${commentListById.total}]];
        var articleId = [[${commentListById.pageList.get(0).articleId}]];
        //获取input中的输入值
        var jumpPage = $("#pageJumpInput").val();
        if (jumpPage >= 1 && jumpPage <= total && jumpPage != current) {
            $.ajax({
                url: "/backstage/commentList/" + (jumpPage) + "/" + articleId,
                success: function (html) {
                    $("#table_content").html(html);
                    setTimeout(function () {
                        layer.msg('已为您跳转至第 ' + jumpPage + ' 页！');
                    }, 300)
                }
            });
        } else if (jumpPage == current) {
            layer.msg('当前为第 ' + current + ' 页，无须跳转！');
        } else {
            layer.msg('页码输入有误，请重新输入！', {icon: 2});
        }
    });
    //删除一条留言操作
    function deleteOneCommentById(data) {
        var deleteId = data.type;
        var current = [[${commentListById.current}]];
        var articleId = [[${commentListById.pageList.get(0).articleId}]];
        layer.confirm('确认删除本条留言及其回复吗？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            $.get(
                "/backstage/deleteCommentByCommentId/" + current + '/' + articleId + '/' + deleteId,
                function (re) {
                    layer.msg('删除成功！', {icon: 1});
                    //刷新当前页面
                    setTimeout(function () {
                        window.location.reload();
                    }, 800)

                });
        }, function () {
        });
    }
    //回复按钮
    function replyComment(data) {
        let commentId = data.type;
        // console.log("commentId====" + commentId);
        layer.load(1, {time: 0.25*1000});
        setTimeout(function () {
            //显示留言信息
            $.get(
                "/backstage/queryCommentContentByCommentId/"+commentId,
                "action=commentId",
                function (data) {
                    $("#comment_content").text(data);
                    $("#comment_id").val(commentId);
                    //给删除按钮赋值id
                    $("#deleteReplyBtn").attr('type',commentId);
                    //给修改提交按钮赋值id
                    $('#editSubmitBtn').attr('type',commentId);
                }
            )
            //判断回复的状态
            $.get(
                "/backstage/isReplyStatus/"+commentId,
                "action=isReplyStatus",
                function (data) {
                    //留言详情小页面显现
                    $("#comment_Reply").css("display", "block");
                    $("#zhezhao").css("display", "block");
                    if (data == 0){//未回复
                        $("#reply_legend").text('');
                        //form表单显现
                        $("#replyForm").css("display", "block");
                        //show不显现
                        $("#showReply").css("display", "none");
                    }else{//已回复状态
                        $("#reply_legend").text("回复内容");
                        //form表单不显现
                        $("#replyForm").css("display", "none");
                        //查询当前留言的回复内容
                        $.get(
                            "/backstage/queryReplyContentByCommentId/"+commentId,
                            "action=queryReplyContentByCommentId",
                            function (data) {
                                $("#showContent_div").text(data);
                                $('#editReplyContentArea').val(data);
                            }
                        )
                        //show显现
                        $("#showReply").css("display", "block");
                    }
                }
            )
        },200)

    }
    //回复提交操作
    $("#submitBtn").click(function () {
        var content = $("#replyContentArea").val();
        var formDate = $("#replyForm").serialize();
        if (content == "" || $.trim(content).length == 0) {
            layer.msg('回复不可为空！', {icon: 2});
        } else {
            $.post(
                "/backstage/replyMessage",
                "action=replyMessage&"+formDate,
                function (data) {
                    if (data == true){
                        layer.msg('提交成功！', {icon: 1});
                        $("#replyForm").css("display", "none");

                        $("#showContent_div").text($("#replyContentArea").val());
                        $("#showReply").css("display", "block");
                    }else{
                        layer.msg('提交失败！', {icon: 2});
                    }

                }
            )
        }
    })
    //form中的取消按钮
    $("#replyFormCancel").click(function () {
        $("#comment_Reply").css("display", "none");
        $("#zhezhao").css("display", "none");
    })
    //show中的删除当前回复操作
    function deleteOneReply(data){
        let commentId = data.type;
        layer.confirm('确认删除本条回复吗？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            $.get(
                "/backstage/deleteReplyByCommentId/"+commentId,
                function (data) {
                    if (data == true){
                        layer.msg('删除成功！', {icon: 1});
                        $("#showReply").css('display','none');
                        $("#replyForm").css('display','block');
                    }else {
                        layer.msg('删除失败！', {icon: 2});
                    }
                }
            )
        },function(){
        });

    }
    //show中的修改当前回复(回显信息)
    function editOneReply(){
        //比对信息
        var outContent = $('#showContent_div').text();
        var inContent = $('#editReplyContentArea').val();
        if (inContent == outContent){
            $('#editReplyForm').css('display','block');
            $('#showReply').css('display','none');
        }else{
            $('#editReplyContentArea').val($('#showContent_div').text());
            $('#editReplyForm').css('display','block');
            $('#showReply').css('display','none');
        }
    }
    //提交修改
    function submitReplyChanges(data){
        let commentId = data.type;
        // console.log("submitCommentId======"+commentId);
        var editContent = $('#editReplyContentArea').val();
        if (editContent == ""||$.trim(editContent).length == 0){
            layer.msg('提交不可为空！', {icon: 2});
            return false;
        }
        $.get(
            "/backstage/submitReplyChanges/"+commentId+'/'+editContent,
            function (data) {
                // console.log(data);
                if (data == true){
                    layer.msg('提交成功！', {icon: 1});
                    $('#editReplyForm').css('display','none');
                    $('#showReply').css('display','block');
                    $.get(
                        "/backstage/queryReplyContentByCommentId/"+commentId,
                        function (data) {
                            // console.log(data);
                            $('#showContent_div').text(data);
                        }
                    )
                }else{
                    layer.msg('提交失败！', {icon: 2});
                }
            }
        )
    }
    //show中的取消按钮
    $("#showCancel").click(function () {
        $("#comment_Reply").css("display", "none");
        $("#zhezhao").css("display", "none");

        $("#replyContentArea").val('');
        $("#showContent_div").text('');
    })
    //修改回复中的取消按钮
    $('#editReplyFormCancel').click(function () {
        $('#editReplyForm').css('display','none');
        $('#showReply').css('display','block');
    })
</script>
</html>